<!-- @format -->

<template>
  <view class="easyClear">
    <child-header-bar
      :childTitle="childTitle"
      @getMarginTop="getMarginTop"></child-header-bar>
    <view class="easyClear-content" :style="[{ top: top + 'px' }]">
      <view class="activity">
        <view class="tabs">
          <text
            v-for="(item, index) in tabs"
            :key="item"
            :class="{ active: tabIndex === index }"
            @tap="changeTab(index)"
            >{{ item }}</text
          >
        </view>
        <view class="masonry" v-if="tabIndex === 0">
          <view class="item" v-for="item in skiList" @tap="newDetail(item)">
            <image mode="widthFix" :src="item.coverPhoto" />
            <view class="characters">
              <text>{{ item.newsTitle }}</text>
              <view class="isContent">
               <!--<text class="userName">{{ item.slopeName }}</text> --> 
                <text class="userDate">{{ item.publishTime }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="masonry" v-if="tabIndex === 1">
          <view class="item" v-for="item in activityList">
            <navigator
              :url="`/myPackageA/pages/tabuLation/activity?id=${item.activityId}&img=${item.coverPhoto}&title=${item.activityName}`"
              hover-class="none">
              <view class="status">
                <image mode="widthFix" :src="item.coverPhoto"> </image>
                <view class="statusText" >
				  <text v-if="item.activeState == '0'" style="color: #88f79c">
				   未开始
				  </text>
				  <text v-if="item.activeState == '1'" style="color: #ff4e00">
					进行中
				  </text>
				  <text v-if="item.activeState == '2'" style="color: #bcc0c5">
				   已结束
				  </text>
                </view>
              </view>
              <view class="characters">
          <text>{{ item.activityName }}</text>

                <view class="isContent">
                       <!--<text class="userName">{{ item.slopeName }}</text> --> 
                  <text class="userDate">{{ item.publishTime }}</text>
                </view>
              </view>
            </navigator>
          </view>
        </view>
        <view class="masonry" v-if="tabIndex === 99">
          <view class="item" v-for="item in liveList">
            <navigator
              :url="`/myPackageA/pages/tabuLation/liveDetail?id=${item.liveId}&img=${item.coverPhoto}&title=${item.liveTitle}`"
              hover-class="none">
              <view class="status">
                <image mode="widthFix" :src="item.coverPhoto"> </image>
              </view>
              <view class="characters">
                <text>{{ item.liveTitle }}</text>
                <view class="isContent">
                     <!--<text class="userName">{{ item.slopeName }}</text>-->
                  <text class="userDate">{{ item.publishTime }}</text>
                </view>
              </view>
            </navigator>
          </view>
        </view>
        <view class="masonry" v-if="tabIndex === 2">
          <view class="item" v-for="item in counselList">
            <navigator
              :url="`/myPackageA/pages/tabuLation/counselDetail?id=${item.counselId}&img=${item.coverPhoto}&title=${item.counselTitle}`"
              hover-class="none">
              <view class="status">
                <image mode="widthFix" :src="item.coverPhoto"> </image>
              </view>
              <view class="characters">
                <text>{{ item.counselTitle }}</text>
                <view class="isContent">
                     <!--<text class="userName">{{ item.slopeName }}</text>-->
                  <text class="userDate">{{ item.publishTime }}</text>
                </view>
              </view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      childTitle: '资讯',
      top: 68,
      tabs: ['资讯', '活动',  '优惠'],
      tabIndex: 0,
      skiList: [],
      activityList: [],
      param: {
        pageNum: 1,
        pageSize: 10,
      },
      status: [],
      liveList: [],
      counselList: [],
    }
  },
  onLoad(e) {

	  if(e.type=='yh')
	  {
		 	this.tabIndex = 2
	  }
    this.getNewList()
    this.getActivityList()
    this.getLiveList()
    this.getCounseList()

  },

  methods: {
    // 动态接收导航栏高度
    getMarginTop(marginTop) {
      this.top = marginTop ? marginTop : 150
    },
    changeTab(index) {
      this.tabIndex = index
	  this.param.pageNum=1
	    this.param.pageSize=10
	  console.log(index)
    },
    newDetail(item) {
      uni.navigateTo({
        url: `/myPackageA/pages/tabuLation/terminal?id=${item.newsId}&img=${item.coverPhoto}&title=${item.newsTitle}`,
      })
    },
	onReachBottom() {
		 let _this = this
	  _this.param.pageNum++;
	     
		switch(_this.tabIndex)
		{
			case 0:
			_this.getNewList()
			break;
			case 1:
			_this.getActivityList()
			break;
			case 2:
		_this.getCounseList()
		console.log('x')
			break;
		}



	},
    // 咨询
    getNewList() {
      let _this = this
      wx.request({
        url: this.$httpApi.install.slope,
        method: 'GET',
        data: this.param,
        success(res) {

		  _this.totalPage = Math.ceil(res.data.total / _this.param.pageSize)
		  // 不足分页数量
		  if (_this.param.pageNum <=_this.totalPage) {
		    	_this.skiList = _this.skiList.concat(res.data.rows);
		  }
        },
      })
    },
    // 活动
    getActivityList() {
      let _this = this
      wx.request({
        url: this.$httpApi.install.activity,
        method: 'GET',
        data: this.params,
        success(res) {
          console.log('1', res)
		  _this.totalPage = Math.ceil(res.data.total / _this.param.pageSize)
		  // 不足分页数量
		  if (_this.param.pageNum <=_this.totalPage) {
		    	_this.activityList = _this.activityList.concat(res.data.rows);
		  }
        },
      })
      let ski_active_state = 'ski_active_state'
      wx.request({
        url: this.$httpApi.install.activityDict,
        method: 'GET',
        data: {
          dictType: ski_active_state,
        },
        success(res) {
          console.log('2', res.data.data)
          _this.status = res.data.data
        },
      })
    },
    // 直播
    getLiveList() {
      let _this = this
      wx.request({
        url: this.$httpApi.install.liveList,
        method: 'GET',
        data: this.params,
        success(res) {
          console.log('直播', res)
          _this.liveList = res.data.rows
        },
      })
    },
    // 优惠
    getCounseList() {
      let _this = this
      wx.request({
        url: this.$httpApi.install.counselList,
        method: 'GET',
        data: this.param,
        success(res) {
          console.log('优惠', res)
		  _this.totalPage = Math.ceil(res.data.total / _this.param.pageSize)
		  // 不足分页数量
		  if (_this.param.pageNum <=_this.totalPage) {
		    	_this.counselList = _this.counselList.concat(res.data.rows);
		  }
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.easyClear-content {
  position: absolute;
  width: 100%;
  /* padding: 0 30rpx; */
}

.activity {
  width: 100%;
  background-color: #fff;
}
/* 小部件 */
.widgets {
  padding: 20rpx 25rpx 0;
  height: 100vh;
  background-color: #f7f7f8;
}

.tabs {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  height: 40rpx;
  line-height: 100rpx;
}
.tabs text {
  font-size: 30rpx;
  color: #a4a4a4;
  position: relative;
  left: 30rpx;
}
.tabs text:nth-child(2) {
  left: 80rpx;
}
.tabs text:nth-child(3) {
  left: 130rpx;
}
.tabs text:nth-child(4) {
  left: 190rpx;
}
.tabs .active {
  font-size: 36rpx;
  color: #303030;
  font-weight: 500;
  position: relative;
}
.tabs .active::after {
  position: absolute;
  left: 50%;
  top: 70rpx;
  font-weight: 500;
  bottom: -34rpx;
  width: 40rpx;
  height: 6rpx;
  background-color: #303030;
  border-radius: 20%;
  content: '';
  transform: translate(-50%);
}
.masonry {
  // width: 100%; // 默认宽度
  margin: 50rpx 8rpx;
  columns: 2; // 默认列数
  column-gap: 10px; // 列间距
  background-color: #f8fafe;
  border-top-left-radius: 20rpx !important; /* 左上角 */
  border-top-right-radius: 20rpx !important; /* 右上角 */
}

.item {
  width: 100%;
  break-inside: avoid;
  background-color: #fff;
}

.item image {
  width: 100%;
  border-top-left-radius: 20rpx !important; /* 左上角 */
  border-top-right-radius: 20rpx !important; /* 右上角 */
}

.characters {
  padding-left: 16rpx;
  padding-right: 11rpx;
}
.item text {
  padding: 8px 0;
  font-size: 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: #464646;
  line-height: 30rpx;
}

.status {
  position: relative;
  .statusText {
    position: absolute;
    // top: 0;
    bottom: 20rpx;
    left: 10rpx;
    width: 118rpx;
    height: 53rpx;
    background: #303030;
    border-radius: 31rpx 31rpx 31rpx 31rpx;
    text {
      font-size: 24rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #88f79c;
      margin-left: 23rpx;
    }
  }

  // .statusText {
  //   position: absolute;
  //   top: 220rpx;
  //   left: 15rpx;
  //   width: 118rpx;
  //   height: 53rpx;
  //   background: #303030;
  //   border-radius: 31rpx 31rpx 31rpx 31rpx;
  //   text {
  //     font-size: 24rpx;
  //     font-family: Source Han Sans CN, Source Han Sans CN;
  //     font-weight: 400;
  //     color: #88f79c;
  //     margin-left: 23rpx;
  //   }
  // }
}
.isContent {
  display: flex;
  justify-content: space-between;
  .userName {
    font-size: 20rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #a4a4a4;
  }

  .userDate {
    font-size: 18rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #a4a4a4;
  }
}
</style>
